<template>
<div class="dashboard-container">
    <div class="topTit">
        <el-date-picker v-model="value" @change="setDate" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期" :picker-options="pickerOptions" end-placeholder="结束日期">
        </el-date-picker>
        <div class="outData" @click="outData">导出原始数据</div>
    </div>
    <div class="setContent">
        <div class="cont">
            <el-table :data="tableData" stripe>
                <el-table-column label="姓名" prop="username" width="120" fixed align="center">
                    <template scope="scope">
                        <span style="color: #3345ff">{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="workNumber" label="工号" width="120" fixed align="center" />
                <el-table-column prop="department.name" label="部门" width="120" show-overflow-tooltip fixed align="center" />
                <el-table-column prop="post" label="职位" show-overflow-tooltip fixed />
                <div v-if="total > 0">
                    <el-table-column type="index" v-for="(item, ind) in tableData[0].signs" :key="ind" :label="item.signDate" align="center" width="95">
                        <template scope="scope">
                            <span v-show="scope.row.signs[ind].signCount == 0" style="color: #666">{{ scope.row.signs[ind].signCount }}</span>
                            <span v-show="scope.row.signs[ind].signCount > 0" style="color: #3345ff; cursor: pointer" @click="showInfo(scope.row, item)">{{ scope.row.signs[ind].signCount }}</span>
                        </template>
                    </el-table-column>
                </div>
            </el-table>
            <div class="pageList" v-if="total > 10">
                <el-pagination layout="prev, pager, next" @current-change="handleSizeChange" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" center width="40%" style="border-radius: 10px" :before-close="handleClose">
        <div class="userInfo" v-if="userInfo.user">
            <div class="header">
                <div class="headIcon">
                    <img v-if="userInfo.user.icon" :src="userInfo.user.icon" alt="" width="30" />
                    <div v-if="!userInfo.user.icon" class="icon">图</div>
                </div>
                <div>
                    <div>{{ userInfo.user.username }}</div>
                    <div>{{ userInfo.user.department.name }}</div>
                </div>
            </div>
            <div class="content">
                <div class="itemBox">
                    <div class="items" v-for="it in userInfo.signs" :key="it.id">
                        <div>
                            <span class="tit">{{ formatDate(it.createTime) }}</span><span>{{ it.address }}</span>
                        </div>
                        <div>
                            <span class="tit">签到备注: </span><span>{{ it.remarks }}</span>
                        </div>
                        <div class="price">
                            <span class="tit">签到图片: </span>
                            <span v-if="it.pictures.length">
                                <img v-for="item in it.pictures" :key="item.id" :src="item.picture" alt="" width="70" height="70" />
                            </span>
                            <span v-if="!it.pictures.length">暂无！</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</div>
</template>

<script>
  import moment from "moment";

  export default {
    name: "Dashboard",
    filters: {
        dateFormat(val) {
            return val;
        },
    },
    data() {
        return {
            value: "",
            title: "",
            total: 0,
            dialogVisible: false,
            userInfo: {},
            params: {
                startTime: "",
                endTime: "",
                page: 1,
                pageSize: 10,
            },
            loading: true,
            tableData: [{}],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
        };
    },
    created() {
        this.setValue();
        // this.getAttendanceList()
    },
    methods: {
        getAttendanceList() {
            this.$store
                .dispatch("register/getSignListAct", this.params)
                .then((res) => {
                    this.tableData = res.rows;
                    this.params.page = res.page;
                    this.total = res.total;
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        setDate(value) {
            this.params.startTime = moment(value[0], "YYYY-MM-DD HH:mm:ss").format(
                "YYYY-MM-DD"
            );
            this.params.endTime = moment(value[1], "YYYY-MM-DD HH:mm:ss").format(
                "YYYY-MM-DD"
            );
            this.getAttendanceList();
        },
        outData() {
            const startTime = moment(this.value[0], "YYYY-MM-DD HH:mm:ss").format(
                "YYYY-MM-DD"
            );
            const endTime = moment(this.value[1], "YYYY-MM-DD HH:mm:ss").format(
                "YYYY-MM-DD"
            );
            this.$store
                .dispatch("register/signExoprtAct", {
                    startTime,
                    endTime,
                })
                .then((res) => {
                    if (res.success) {
                        const url = res.data;
                        let a = document.createElement("a");
                        a.href = url;
                        a.click();
                    } else {
                        this.$message.error("出错了！" + res.message);
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        setValue() {
            let date = [];
            date.push(moment().subtract("days", 6));
            date.push(moment().subtract("days", 0));
            this.value = date;
            this.setDate(date);
        },
        showInfo(row, attend) {
            const data = row;
            this.title = moment(attend.signDate, "YYYY-MM-DD").format(
                "YYYY年MM月DD日"
            );
            this.$store
                .dispatch("register/getSignDetAct", {
                    userId: row.id,
                    signDate: moment(attend.signDate, "YYYY-MM-DD").format("YYYY-MM-DD"),
                })
                .then((res) => {
                    this.userInfo = res;
                    this.dialogVisible = true;
                });
        },
        handleClose(done) {
            done();
        },
        handleSizeChange(val) {
            this.params = {
                ...this.params,
                page: val,
            };
            this.getAttendanceList();
        },
        formatDate(val) {
            return moment(new Date(Number(val))).format("YYYY-MM-DD HH:mm:ss");
        },
    },
};
</script>

<style lang="scss">
.setContent {
    .cont {

        .el-table thead th,
        .el-table thead tr {
            background: #edeffd;
        }
    }

    .pageList {
        text-align: right;
        padding: 10px 0;

        .el-pager li {
            margin: 0 5px;
            min-width: 28px;
            width: 28px;
        }

        .active {
            background: #3345ff;
            border-radius: 100%;
            color: #fff;
        }
    }
}

.el-dialog__header {
    border-bottom: solid 1px #eaeaea;
}
</style>
<style lang="scss" scoped>
.dashboard {
    &-container {
        padding: 0 15px;

        .topTit {
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .outData {
                color: #3345ff;
                cursor: pointer;
                font-size: 14px;
            }
        }

        .setContent {
            background: #fff;
            min-height: 510px;

            .title {
                padding: 0 15px;
                line-height: 40px;
                background: #eceffc;
            }

            .cont {}
        }

        .userInfo {
            .header {
                background: rgba(40, 97, 254, 0.14);
                display: flex;
                padding: 10px 20px;
                line-height: 20px;
                border-radius: 8px;

                .headIcon {
                    width: 40px;
                    height: 40px;
                    margin-right: 10px;

                    img {
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        border-radius: 100%;
                    }
                }

                .icon {
                    font-size: 20px;
                    text-align: center;
                    line-height: 40px;
                    width: 40px;
                    height: 40px;
                    color: #fff;
                    background: #3345ff;
                    border-radius: 100%;
                }
            }

            .content {
                line-height: 35px;
                margin-top: 10px;

                .itemBox {
                    max-height: 240px;
                    overflow: scroll;
                }

                .items {
                    border-bottom: solid 1px #ccc;
                    padding: 15px 0;

                    .tit {
                        margin-right: 10px;
                    }

                    .price {
                        display: flex;

                        img {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
}
</style>
